<template>
    <Layout>
        <!-- banner -->
        <div class="TopBanner">
            <div class="container">
                <div class="row row--30">
                    <div class="col-lg-12">
                        <p class="Banner-ti">数据驱动 智慧生活</p>
                        <h2 class="Banner-Zhong">服务与帮助</h2>
                        <h2 class="Banner-Bot">迅速解决问题</h2>
                    </div>
                    <div class="col-lg-12">
                        <p class="Banner-Cul"><span>精雕细琢十载</span>|<span
                                style="margin: 0px 2px;">API安全稳固</span>|<span>品质之选</span></p>
                    </div>
                    <div class="col-lg-12">
                        <div class="BannerBotBtn">
                            <button class="BannerBotBtn-1" @click="ShowNow">立即咨询</button>
                            <!-- <button class="BannerBotBtn-2" @click="NowRegister">立即注册</button> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 帮助中心 分类 -->

        <div class="HelpCenterClass">
            <div class="container">
                <el-row :gutter="20" style="margin: 50px 0 20px 0;">
                    <el-col :span="3" v-for="(tab, index) in TabsList" :key="tab.id">
                        <div class="HelpCenCsBox tabssss" @click="selectTab(index)"
                            :class="{ 'active': activeTab === index }">
                            <img :src="tab.img" alt="">
                            <p class="HelpCCBTi">{{ tab.label }}</p>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="FoldingPanel">
                    <el-col :span="24">
                        <div>
                            <el-collapse v-for="(panel, index) in FoldPanelist" :key="index"> 
                                <el-collapse-item :title="panel.name" :name="panel.id">
                                    <div>{{ panel.label }}</div>
                                </el-collapse-item>
                                
                            </el-collapse>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>


        <RegisterPage></RegisterPage>

    </Layout>
</template>

<script>
import Layout from '../../components/common/Layout'

import Icon from '../../components/icon/Icon'
import BlogPostMixin from '../../mixins/BlogPostMixin'
import RegisterPage from '../../components/register/register'
export default {
    name: 'productPage',
    components: {
        Icon,
        Layout,
        RegisterPage
    },
    mixins: [BlogPostMixin],
    data() {
        return {
            activeTab: 0, // 默认激活的 Tab 索引
            TabsList: [
                { id: 1, label: '注册与登录',img:require('../../assets/images/banner/h-helpclass.png') },
                { id: 2, label: '实名认证',img:require('../../assets/images/banner/h-helpclass2.png') },
                { id: 3, label: '接口申请与购买',img:require('../../assets/images/banner/h-helpclass3.png') },
                { id: 4, label: '接口调用',img:require('../../assets/images/banner/h-helpclass4.png') },
                { id: 5, label: '申请购买' ,img:require('../../assets/images/banner/h-helpclass5.png')},
            ],
            FoldPanelist:[
                {id:1,name:'接口的调用方式是什么?',label:'GET 请求：用于从服务器获取数据。常见于获取资源或查询操作。POST 请求：用于向服务器发送数据，通常用于创建资源或提交表单。PUT 请求：用于更新服务器上的资源。'},
                {id:2,name:'返回代码释义是什么?',label:'200 OK：请求成功，服务器返回请求的资源。201 Created：资源创建成功，通常用于 POST 请求。204 No Content：请求成功，但没有返回任何内容。400 Bad Request：请求有误，服务器无法理解。'},
                {id:3,name:'URL的中文编码是utf-8吗?',label:'URL 的中文编码通常是 UTF-8。为了确保 URL 中的中文字符能被正确解析，通常需要将这些字符转换为百分号编码（百分比编码），例如，将“你好”转换为“%E4%BD%A0%E5%A5%BD”。'},
                {id:4,name:'注册的方式有哪些?',label:'手机号短信注册'},
                {id:4,name:'登录的方式有哪些?',label:'手机验证码登录，手机号密码登录'},
            ]
        }
    },
    methods: {
        selectTab(index) {
            this.activeTab = index;
        },

        ShowNow(){
            this.$router.push({
				    path: '/seekadfrom'
				})
        },
        NowRegister(){
            this.$router.push({
				    path: '/register'
				})
        }
       
    }
}
</script>
<style scoped lang="scss">
.TopBanner {
    width: 100%;
    margin: 0 auto;
    color: #fff;
    // height: 700px;
    /* background-color: #ccc; */
    background-image: url('../../assets/images/banner/bangzhudbgc.png');
    background-size: 100% 100%;

    .Banner-ti {
        margin-top: 5%;
        font-family: serif;
        font-size: 48px;
    }

    .Banner-Zhong {
        margin: 5px 0px;
        font-size: 68px;
        font-weight: 700;
    }

    .Banner-Bot {
        font-weight: 400;
        font-size: 68px;
        margin-bottom: 20px;
    }

    .Banner-Cul {
        margin-bottom: 4%;
        font-size: 20px;
    }


    .BannerBotBtn {
        display: flex;
        margin-bottom: 20%;

       .BannerBotBtn-1 {
           width: 160px;
           border: 2px solid #62C3D0;
           /* border: 3px solid transparent; */
           color: #62C3D0;
           font-size: 20px;
           border-radius: 3px;
           font-weight: 600;
           margin: 0px 10px 0px 0px;
           height: 59px;
           background-color: transparent;
       }
       
       .BannerBotBtn-2 {
           width: 160px;
           border: 2px solid #e30083;
           color: #fff;
           font-size: 20px;
           border-radius: 3px;
           font-weight: 600;
           height: 59px;
       
           margin: 0px 5px 0px 0px;
           background-color: #e30083;
       }
    }
    @media screen and (max-width: 1200px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 32px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 52px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 52px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 16px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 140px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 50px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 140px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                height: 50px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }
    }


    @media screen and (max-width: 768px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 20px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 36px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 40px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 14px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 100px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 40px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 100px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                height: 40px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }

    @media screen and (max-width: 500px) {
        .Banner-ti {
            margin-top: 8%;
            font-family: serif;
            font-size: 16px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 20px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 12px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 80px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 30px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 80px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                height: 30px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }
}

// 帮助中心
.HelpCenterClass {
    width: 100%;
    background-color: #FAFAFA;
    overflow: hidden;

    .HelpCenCsBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        box-shadow: 0px 0px 10px #ccc;
        border-radius: 5px;
        padding: 10px;

        .HelpCCBTi {
            margin: 5px 0 0 0;
            color: #3D3D3D;
            font-weight: 500;
        }
    }

    ::v-deep .el-collapse-item__header {
        padding: 20px;
    }
    ::v-deep .el-collapse-item__content{
        padding: 5px 20px;
    }
    .FoldingPanel{
        margin: 20px 0 50px 0;
    }
}

.tabssss {
    cursor: pointer;
}

.tabssss.active {
    /* 定义当前选中tab的背景颜色 */
    background-color: #abcffe;

}


/* 帮助中心... */



</style>